<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="gsw945" />
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
    <title>Phaser Demo With Parcel</title>
    <link rel="stylesheet" href="styles.css" />
    <style type="text/css">
        body,
        html {
            margin: 0;
            padding: 0;
            border: 0;
        }
        #game {
            border: 1px solid #fa1;
        }
    </style>
</head>
<body>
    <!-- <h1>Hello, World!</h1> -->
    <div class="page-body">
        <div id="game"></div>
    </div>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/phaser/3.52.0/phaser.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var config = {
            type: Phaser.AUTO,
            parent: 'game',
            width: 800,
            height: 600,
            backgroundColor: 0x2d2d2d,
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { y: 200 }
                }
            },
            scene: {
                preload: preload,
                create: create,
                update: update,
                render: render
            },
            loader: {
                baseURL: "https://labs.phaser.io",
                crossOrigin: "anonymous"
            }
        };

        var BASE_FRAME = "__BASE";
        var STARS_COUNT = 10000;
        var STAR_WIDTH = 8;
        var STAR_HEIGHT = 8;
        var stars = new Array(STARS_COUNT);
        var starsTree = new Phaser.Structs.RTree();

        var controls, rt;

        var game = new Phaser.Game(config);

        function preload() {
            this.load.image("cursor", "assets/sprites/drawcursor.png");
            this.load.image("star", "assets/demoscene/star2.png");
            this.load.image("ship", "assets/tests/scenes/ship.png");
            this.load.spritesheet("asteroid", "assets/tests/scenes/asteroid.png", {
                frameWidth: 96,
                frameHeight: 96
            });
        }

        function create() {
            for (var i = 0; i < STARS_COUNT; i++) {
                var x = Phaser.Math.Between(-4000, 4000);
                var y = Phaser.Math.Between(-3000, 3000);

                stars[i] = {
                    x,
                    y,
                    left: x,
                    top: y,
                    right: x + STAR_WIDTH,
                    bottom: y + STAR_HEIGHT
                };
            }

            console.time("load");
            starsTree.load(stars);
            console.timeEnd("load");

            rt = this.add.renderTexture(0, 0, 800, 600).setScrollFactor(0, 0);

            this.add.image(0, 0, "cursor");
            this.add.image(400, 300, "ship");
            this.add.image(800, 600, "asteroid");

            var cursors = this.input.keyboard.createCursorKeys();

            controls = new Phaser.Cameras.Controls.SmoothedKeyControl({
                camera: this.cameras.main,
                left: cursors.left,
                right: cursors.right,
                up: cursors.up,
                down: cursors.down,
                acceleration: 0.06,
                drag: 0.0005,
                maxSpeed: 1.0
            });

            // Update `worldView`
            this.cameras.main.preRender();
            
            // Force first draw
            this.cameras.main.dirty = true;
        }

        function update(time, delta) {
            var { main } = this.cameras;

            controls.update(delta);

            if (main.dirty) {
                var { worldView } = main;
                var found = starsTree.search({
                    minX: worldView.left,
                    minY: worldView.top,
                    maxX: worldView.right,
                    maxY: worldView.bottom
                });

                rt.camera.x = -main.scrollX;
                rt.camera.y = -main.scrollY;

                rt.clear();
                rt.beginDraw();

                for (var i = 0; i < found.length; i++) {
                    var { x, y } = found[i];

                    rt.batchDrawFrame("star", BASE_FRAME, x, y);
                }

                rt.endDraw();
                rt.drawFrame("cursor", BASE_FRAME, -16, -16);

                // console.count('draw');
            }
        }

        function render () {
            //
        }
    </script>
</body>
</html>